<template>
  <view class="tab-bar">
    <view 
      class="tab-item" 
      v-for="(item, index) in tabList" 
      :key="index"
      @tap="switchTab(item.pagePath)"
      :class="{ active: currentPage === item.pagePath }"
    >
      <image :src="currentPage === item.pagePath ? item.selectedIconPath : item.iconPath" mode="aspectFit" class="tab-icon"></image>
      <text class="tab-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

// 当前页面路径
const currentPage = ref('');

// 底部导航栏配置
const tabList = [
  {
    pagePath: '/pages/home/index',
    iconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-home-1439-1171548.png',
    selectedIconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-home-1439-1171548.png',
    text: '首页'
  },
  {
    pagePath: '/pages/community/index',
    iconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-people-1767506-1505493.png',
    selectedIconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-people-1767506-1505493.png',
    text: '社区'
  },
  {
    pagePath: '/pages/service/index',
    iconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-box-1439-1171538.png',
    selectedIconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-box-1439-1171538.png',
    text: '服务'
  },
  {
    pagePath: '/pages/message/index',
    iconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-chat-2639493-2187526.png',
    selectedIconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-chat-2639493-2187526.png',
    text: '消息'
  },
  {
    pagePath: '/pages/me/index',
    iconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-user-1439-1171571.png',
    selectedIconPath: 'https://cdn.iconscout.com/icon/free/png-256/free-user-1439-1171571.png',
    text: '我的'
  }
];

// 切换页面
const switchTab = (path) => {
  if (currentPage.value === path) return;
  
  uni.switchTab({
    url: path,
    fail: () => {
      // 如果不是 tabBar 页面，则使用 navigateTo
      uni.navigateTo({
        url: path
      });
    }
  });
};

// 获取当前页面路径
const getCurrentPage = () => {
  const pages = getCurrentPages();
  if (pages.length) {
    const page = pages[pages.length - 1];
    return `/${page.route}`;
  }
  return '/pages/home/index';
};

// 组件挂载时获取当前页面
onMounted(() => {
  currentPage.value = getCurrentPage();
});
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    
    &.active {
      .tab-text {
        color: #07c160;
      }
    }
    
    .tab-icon {
      width: 24px;
      height: 24px;
      margin-bottom: 2px;
    }
    
    .tab-text {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
